<template>
    <view class="zai-box">
		<view class="status_bar">
			  <!-- 这里是状态栏 --> 
		</view>
        <image src="../static/logo/register.png" mode='aspectFit' class="zai-logo"></image>
        <view class="zai-title">登录</view>
        <view class="zai-form">
            <input class="zai-input" placeholder-class v-model="UserInfo.name" placeholder="请输入用户名" />
            <input class="zai-input" placeholder-class password v-model="UserInfo.pwd" placeholder="请输入密码"/>

            <navigator url="../pages/checking" open-type="navigate"><view class="zai-label"> 忘记密码？</view></navigator>
            <button class="zai-btn"  @tap="UserLogins">立即登录</button>
            <navigator url="../pages/regist" hover-class="none" class="zai-label">还没有账号？点此注册.</navigator>
        </view>
    </view>

</template>

<script>
	
import uniNavBar from "@/components/uniapp/uni-nav-bar/uni-nav-bar.vue"

export default {

    data(){
        return{
            UserInfo:{
                name:'',
                pwd:'',
            }
        }
    },


    methods:{
		
		async UserLogins(){
			console.log(123)
			if( this.UserInfo.name.length === 0 || this.UserInfo.pwd.length === 0 ){
					uni.showModal({
						content: '账号和密码不能为空！！！',
						showCancel: false
					});
					
			}else{
				
				console.log(456)
				 
				  var data =await  this.$http.userService.UserLogin(this.UserInfo);
					//localStorage.setItem("token", data.result.token)
					uni.setStorageSync('token',data.result.token)
					//登录成功，路由跳转
					uni.redirectTo({
					    url: '/pages/me',
					    animationType: 'pop-in',
					    animationDuration: 200
					});
					
				  }
		}
		

        },
    
	components: {uniNavBar}




}

</script>

<style scoped>
	.status_bar {
	    height: var(--status-bar-height);
	    width: 100%;
	}
    .zai-box{
        padding: 0 100upx;
        position: relative;
    }
    .zai-logo{
        width: 100%;
        width: 100%;
        height: 310upx;
    }
    .zai-title{
        position: absolute;
        top: 10px;
        line-height: 360upx;
        font-size: 68upx;
        color: #fff;
        text-align: center;
        width: 100%;
        margin-left: -100upx;
    }
    .zai-form{
        margin-top: 300upx;
    }
    .zai-input{
        background: #e2f5fc;
        margin-top: 30upx;
        border-radius: 100upx;
        padding: 20upx 40upx;
        font-size: 36upx;
    }
    .input-placeholder, .zai-input{
        color: #94afce;
    }
    .zai-label{
        padding: 60upx 0;
        text-align: center;
        font-size: 30upx;
        color: #a7b6d0;
    }
    .zai-btn{
        background: #ff65a3;
        color: #fff;
        border: 0;
        border-radius: 100upx;
        font-size: 36upx;
    }
    .zai-btn:after{
        border: 0;
    }
    /*按钮点击效果*/
    .zai-btn.button-hover{
        transform: translate(1upx, 1upx);
    }
</style>
